import React from "react";
import './login.less';
import { Button, Form, Input, message } from 'antd';
import { useNavigate } from 'react-router';
import { checkLogin } from '@/api/account';

export default function Login() {
  const navigate = useNavigate();
  
  const onFinish = async (values) => {
    try {
      console.log('提交数据:', values);
      const res = await checkLogin(values);
      
      // 严格按文档的响应格式处理
      if (res.code === 0) {
        message.success(res.msg || '登录成功');
        
        // 按文档字段存储
        sessionStorage.setItem('user', JSON.stringify({
          id: res.id,
          role: res.role,
          token: res.token
        }));
        
        navigate('/home');
      } else {
        // 使用后端返回的错误信息
        message.error(res.msg || '登录失败');
      }
    } catch (err) {
      console.error('登录错误:', err);
      // 显示更详细的错误信息
      message.error(
        err.response?.data?.msg || 
        err.message || 
        '登录失败，请检查网络连接'
      );
    }
  };

  return (
    <div className="login">
      <div className="form-box">
        <Form onFinish={onFinish}>
          <Form.Item
            label="账号"
            name="account"
            rules={[
              { required: true, message: '请输入账号' },
              { min: 1, max: 6, message: '账号长度1-6位' }
            ]}
          >
            <Input 
              placeholder="请输入账号"
              autoComplete="username" // 解决浏览器警告
            />
          </Form.Item>
          
          <Form.Item
            label="密码"
            name="password"
            rules={[
              { required: true, message: '请输入密码' }
            ]}
          >
            <Input.Password 
              placeholder="请输入密码"
              autoComplete="current-password" // 解决浏览器警告
            />
          </Form.Item>
          
          <Form.Item>
            <Button 
              type="primary" 
              htmlType="submit" 
              block
              className="login-btn"
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}